
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTTP协议中的缓存机制是怎样的？服务器如何判断缓存是否过期？ - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>HTTP协议中的缓存机制是怎样的？服务器如何判断缓存是否过期？ - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">HTTP缓存机制被设计用来解决哪些核心问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">HTTP协议中的缓存机制是为了提高性能、减少延迟和带宽使用而设计的。它允许在数据未发生变化时复用已有数据，从而减少对服务器的请求次数和数据传输量。</div>
          </div>
          <div class="card-source">来源: 文档开篇第一段</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">概念</div>
          <div class="card-question">HTTP缓存系统通常包含哪三种不同的角色或层级？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">概念</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">HTTP缓存包含三个主要的角色和层级：1. 客户端缓存（存在于用户的浏览器中）；2. 代理缓存（位于客户端和服务器之间的中间服务器，如CDN）；3. 服务器缓存（服务器端的缓存，用于减少对后端资源的压力）。</div>
          </div>
          <div class="card-source">来源: HTTP缓存机制的基本概念 > 缓存的角色和层级</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">Cache-Control头字段的作用是什么？请给出一个禁止缓存的示例。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cache-Control头字段用于指定缓存策略，包括是否可以缓存、缓存的最大时间等。一个禁止缓存的示例是：`Cache-Control: no-cache, no-store, must-revalidate`。</div>
          </div>
          <div class="card-source">来源: HTTP缓存机制的基本概念 > 缓存控制头</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">什么是ETag？它在HTTP缓存验证中扮演什么角色？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">ETag是资源的唯一标识符，通常表现为一个哈希值。它的作用是用于验证缓存的资源是否发生了变化，通常与`If-None-Match`请求头配合使用。</div>
          </div>
          <div class="card-source">来源: HTTP缓存机制的基本概念 > 缓存控制头</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">当客户端的缓存过期但想验证资源是否更新时，它会如何使用 `If-Modified-Since` 请求头？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">客户端在请求时会包含 `If-Modified-Since` 头字段，并附上本地缓存资源的 `Last-Modified` 时间。服务器会检查资源的最后修改时间，如果晚于客户端提供的时间，则返回新资源；否则，返回304 Not Modified状态码，表示客户端可继续使用缓存。</div>
          </div>
          <div class="card-source">来源: HTTP缓存机制的基本概念 > 缓存验证机制</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">流程</div>
          <div class="card-question">当服务器收到一个带有 `If-None-Match` 请求头的请求时，它会如何判断并响应？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">流程</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">服务器会根据请求中 `If-None-Match` 提供的ETag值与当前资源的ETag值进行比较。如果两个ETag值匹配，表示资源没有变化，服务器将返回304 Not Modified状态码；如果不匹配，则返回新的资源。</div>
          </div>
          <div class="card-source">来源: HTTP缓存机制的基本概念 > 缓存验证机制</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">流程</div>
          <div class="card-question">请描述HTTP缓存控制的三个主要工作步骤。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">流程</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">HTTP缓存控制的工作流程分为三步：1. **初次请求**：客户端请求资源，服务器返回资源及缓存控制头；2. **后续请求**：客户端根据缓存策略检查本地缓存是否有效，若有效则直接使用；3. **验证请求**：当缓存需要验证时，客户端发送带`If-Modified-Since`或`If-None-Match`的请求，服务器判断后决定返回新资源还是304状态码。</div>
          </div>
          <div class="card-source">来源: HTTP缓存机制的基本概念 > 缓存控制的工作流程</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">除了使用 `Cache-Control` 的 `max-age` 指令，还有哪个HTTP头可以用来定义缓存的过期时间？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`Expires`头字段也可以用来指定缓存资源的过期时间。它使用一个具体的HTTP日期时间格式，当系统当前时间超过该时间后，缓存即被认为过期。</div>
          </div>
          <div class="card-source">来源: HTTP缓存机制的基本概念 > 缓存控制头</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">`Last-Modified` 和 `ETag` 这两个响应头在缓存验证机制中有什么共同目的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">它们都用于缓存验证。`Last-Modified`通过比较资源的修改时间，而`ETag`通过比较资源的唯一标识符（哈希值），来判断客户端持有的缓存副本是否仍然是最新的。</div>
          </div>
          <div class="card-source">来源: HTTP缓存机制的基本概念 > 缓存控制头</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
